/**
 * Created by zhouli on 19/5/6
 * 针对报表的特殊组件
 * 选择成本中心组件，组件依赖于账套id
 */
import React from 'react';
import {connect} from 'react-redux';
import {Icon, Select} from 'antd';
import {messages} from 'share/common';
import 'styles/data-center/report/travel-report/components/cost-center-select-for-report/cost-center-select-for-report.scss';
import ListSelector from 'components/list-selector.js';

import chooserData from 'share/chooserData';

class CostCenterSelectForReport extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selectedData: [],//选择的数据
      extraParams: {
        setOfBooksId: "",
      },
      selectorItem: chooserData['select_cost_center_by_sobid'],//弹窗显示配置
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.setOfBooksId === null) {
      this.setState({
        selectedData: []
      })
    } else {
      let {extraParams} = this.state;
      extraParams.setOfBooksId = nextProps.setOfBooksId;
      this.setState({
        extraParams
      })
    }
  }

  //渲染值后面的关闭icon class
  renderVauleClass = () => {
    let {selectedData} = this.state;
    let {setOfBooksId} = this.props;
    let class_name1 = "f-right select-dep-close-wrap";
    let class_name2 = "f-right select-dep-close-wrap select-dep-close-wrap-show";
    if (setOfBooksId && selectedData.length > 0) {
      return class_name2;
    } else if (selectedData.length === 0) {
      return class_name1;
    }
  };
  //渲染值
  renderVauleText = () => {
    let {selectedData} = this.state;
    let {setOfBooksId} = this.props;
    if (setOfBooksId && selectedData.length > 0) {
      return selectedData.map((item,index)=>{
        if(index === selectedData.length-1){
          return item.name
        }else {
          return item.name+','
        }
      });
    } else if (selectedData.length === 0) {
      if (setOfBooksId) {
        return messages('data-center.key27')/*请选择*/;
      } else {
        return messages('data-center.key29')/*请先选择账套*/;
      }
    }
  };

  //显示模板
  showModel = () => {
    this.setState({
      visible: true,
    })
  };
  //清除已经选择的成本中心
  onCloseDepTag = (e) => {
    e.stopPropagation();
    this.setState({
      selectedData: [],
    }, () => {
      this.props.onCancel(undefined);
    })
  };
  onMouseLeaveDepTag = (e) => {
    e.stopPropagation();
  };
  onMouseEnterDepTag = (e) => {
    e.stopPropagation();
  };
  handleCancel = () => {
    this.setState({
      selectedData:[],
      visible: false
    });
    this.props.onCancel(undefined);
  };
  handleOk = (e) => {
    this.setState({
      visible: false
    })
    if(e && e.result){
      let {selectedData} = this.state;
      selectedData = e.result;
      this.setState({
        selectedData
      },()=>{
        this.props.onConfirm(selectedData);
      })
    }else {
      this.props.onConfirm(undefined);
    }
  };

  render() {
    const {visible, extraParams, selectorItem} = this.state;
    let {setOfBooksId,title} = this.props;
    let inputClassName = setOfBooksId ? "input" : "input input-disabled";
    return (
      <div className="cost-center-select-for-report">
        <div>
          <div className="label-text">
            {title}:
          </div>
          <div className="input-wrap">
            <div className={inputClassName}
                 onClick={setOfBooksId && this.showModel}>
              {this.renderVauleText()}
            </div>
            <div className={this.renderVauleClass()}
                 onMouseLeave={this.onMouseLeaveDepTag}
                 onMouseEnter={this.onMouseEnterDepTag}
                 onClick={this.onCloseDepTag}>
              <Icon type="close-circle" className="closeCircle"/>
            </div>
          </div>
        </div>
        <ListSelector
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          extraParams={extraParams}
          selectorItem={selectorItem}
        />
      </div>
    );
  }
}

CostCenterSelectForReport.propTypes = {
  onConfirm: React.PropTypes.func.isRequired,// 点击确认之后的回调：返回结果
  onCancel: React.PropTypes.func.isRequired,//点击取消的时候
  title: React.PropTypes.any.isRequired,//字段标题
  setOfBooksId: React.PropTypes.any,//账套id，需要有账套id查询成本中心
};

CostCenterSelectForReport.defaultProps = {
  title: "成本中心",//由外面传入
  setOfBooksId: null,
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    user: state.login.user,
    tenantMode: state.main.tenantMode,
    company: state.login.company,
  }
}

export default connect(mapStateToProps)(CostCenterSelectForReport);



